<template>
  <div class="comment">
    <x-header title="评价" :left-options="{backText:''}" class='whiteHeader'></x-header>
    <div class="allMain">
      <div class="shopItem">
        <div class="allShop">
            <div v-if="commentMess.DETAIL_LIST[0].FIRST_CLASS!=10001&&commentMess.DETAIL_LIST[0].FIRST_CLASS!=10003">
              <div class="shop" v-for="(items,indexs) in commentMess.DETAIL_LIST" :key="indexs">
                <img :src="items.COVER_IMG" alt="" />
                <div class="shopMess">
                  <h2><label>{{items.D_SUBJECT}}</label><span class="price">￥{{items.sum}}</span></h2>
                  <div class="Spec">
                    <p>
                    <span v-if='items.QUANTITY'>数量{{items.QUANTITY}}</span>
                    <span v-if='items.ATTR_LIST'>
                      <span v-for='(itemss,index) in items.ATTR_LIST' :key="index">
                        {{itemss.TYPE}}:{{itemss.D_SUBJECT}}
                      </span>
                    </span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="shop" v-if="commentMess.DETAIL_LIST[0].FIRST_CLASS==10001||commentMess.DETAIL_LIST[0].FIRST_CLASS==10003">
              <img :src="commentMess.DETAIL_LIST[0].COVER_IMG" alt="" />
              <div class="shopMess">
                <h2><label>{{commentMess.DETAIL_LIST[0].PACKAGE_NAME}}</label><span class="price">￥{{commentMess.TOTAL_PRICE}}</span></h2>
                <div class="Spec">
                  <p>
                  <span>共计{{commentMess.DETAIL_LIST.length}}个部位</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
      </div>
      <divider>
       <p class="dividers">完成评价获取通币奖励</p>
      </divider>
      <div class="starCon">
        <div class="star">
          <span v-for='i in 5' @click='clickStar(i)' :key="i" :class='{selectStar:selectIndex>=i}'></span>
        </div>
        <p>
          <span v-if='selectIndex<=2'>不满意</span>
          <span v-if='selectIndex>2&&selectIndex<5'>满意</span>
          <span v-if='selectIndex==5'>很满意</span>
        </p>
      </div>
      <div class="labels">
        <h1>快速评价</h1>
        <div class="allLabel">
          <div class="lableItem" v-for='(item,index) in labels' :key="index" :class='{selectLabel:item.flag}' @click='clickLabel(index)'>
            <span>{{item.SCOMMENT}}</span>
            <img src="../../assets/image/order/love.png" alt="" />
          </div>
        </div>
      </div>
      <div class="textarea">
        <textarea placeholder="如果您还有其他想说的，请在这里补充" v-model='commentMain'>
          
        </textarea>
      </div>
      <div class="evalImgUpload">
        <div class="inputArea" v-show="imgList.length < 4">
          <input type="file" multiple ref="fileInput" accept="image/*">
          <div class="theMask">
            <img src="../../assets/image/order/chooseImage.jpg" alt="">
          </div>
        </div>
        <ul class="imgArea">
          <li v-for="(item, index) in imgList" :key="index" style="font-size:0.1rem;">
            <div class="closeRemove" @click="del(index)">
              <img src="../../assets/image/order/evalClose.png" alt="">
            </div>
            <img :src="item" alt="" width="200">
          </li>
        </ul>
      </div>
    </div>
    <div class="submitComment" @click='submitComment'>提交评论</div>
  </div>
</template>
<script>
/*评价*/
import {XHeader,Divider} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name:"comment",
  // 数据
  data(){

    return{
    	userId:'',
      orderId:'', //订单id
      commentMess:'',  //订单信息
      labels:'',  //标签
      selectIndex:5,   //选择的星星数 ,默认五星
      imgList:[],  //上传的图片
      commentMain:''  //textarea中的评论内容
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    this.orderId=this.$route.params.id;
    this.commentMess=JSON.parse(localStorage.getItem('commentMess'));
    // console.log(localStorage.getItem('commentMess'));
    this.getLabel();
  },
  // el被创建，并挂载到实例上
  mounted(){
    this.initFileReader();
  },
  // 方法（实例中的方法）-----------
  methods:{
    //获取商品评论label   
    getLabel(){
      this.$fetchPost('/ServCommentWeb/getCommentLabel.action',{CLASS_ID:this.commentMess.FIRST_CLASS}).then(res=>{
          if(res.STATUS_CODE==1){
            let arr=res.RESULT_DATA;
            for(let i=0;i<arr.length;i++){
              this.$set(arr[i],'flag',false);
            }
            this.labels=arr;
          }
        },err=>{
          console.log(err);
      })
    },
    clickStar(i){
      this.selectIndex=i;
    },
    clickLabel(index){
      let flag=!this.labels[index].flag;
      this.$set(this.labels[index],'flag',flag);
    },
    //提交评论
    submitComment(){
      let obj={};
      obj.USER_ID=this.userId;
      obj.ORDER_ID=this.orderId;
      obj.SCORE=this.selectIndex;//评分
      let arr=[];//存储选择的标签
      for(let i=0;i<this.labels.length;i++){
        if(this.labels[i].flag){
          arr.push(this.labels[i].SCOMMENT);
        }
      }
      if(arr.length==0&&this.commentMain==''){
        this.$vux.alert.show({
          title:'提示',
          content:'请填写或选择评论内容',
        })
        return;
      }
      obj.CONTENT=arr.join(',');//评论的内容
      if(this.commentMain!=''){
        obj.CONTENT+=','+this.commentMain;
      }
      obj.ANONYMOUS=0;//0表示不匿名  1表示匿名
      for(let i=1;i<=this.imgList.length;i++){
        obj['PHOTO'+i]=this.imgList[i-1].split(",")[1];
      }
      this.$fetchPost('ServCommentWeb/newPublishMulitServComment.action',obj).then(res=>{
          if(res.STATUS_CODE==1){
            let that=this;
            this.$vux.alert.show({
              title:'提示',
              content:'订单评论成功',
              onHide () {
                that.$router.push('/order/4');
              }
            })
          }
        },err=>{
          console.log(err);
      })
    },
    /**
       * [initFileReader 初始化FileReader读取图片并展示]
       * @return {[type]} [description]
       */
    initFileReader () {
      if ( !FileReader ) {
        alert('您的浏览器不支持FileReader图片上传');
        return;
      }
      var fileInput = this.$refs.fileInput;
      var fileArr = null;
      var that = this;
      fileInput.onchange = function (e) {
        // console.warn(e.target.files)
        fileArr = e.target.files;

        for (var i = 0; i < fileArr.length; i++) {
          let read = new FileReader();
          read.readAsDataURL(fileArr[i])
          read.onload=function(e){  
            if ( that.imgList.length >= 4 ) {
              alert('图片上传最多4张哦')
            }
            else {
              that.imgList.push(this.result);
            }
          }  
          
          
        }
      }
    },
    del(index){
      this.imgList.splice(index,1);
    }
  },
  // 子组件
  components:{
    XHeader,Divider
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.comment{
  width: 7.5rem;
  background: #fff;
  padding-bottom: 0.9rem;
  .submitComment{
    height: 0.88rem;
    position: fixed;
    width: 7.5rem;
    bottom: 0;
    background: #e42e3b;
    line-height: 0.88rem;
    font-size: 0.3rem;
    color: #fff;
    text-align: center;
    z-index: 999;
  }
  .allMain{
    .dividers{
      font-size: 0.3rem;
      margin: 0 -0.7rem;
    }
    .textarea{
      width: 90%;
      margin: 0 auto;
      border:1px solid #edede9;
      height: 2.8rem;
      padding:0.2rem;
      textarea{
        border: 0;
        width: 100%!important;
        height: 100%!important;
        resize: none;
        outline: medium;
        font-size: 0.3rem;
      }
      
    }
    .labels{
      h1{
        font-size: 0.28rem;
        color: #ccc;
        text-align: left;
        padding-left: 0.3rem;
      }
      .allLabel{
        display: flex;
        flex-wrap:wrap;
        padding:0.2rem 0.3rem;
        .lableItem{
          display: flex;
          justify-content:center;
          align-items:center;
          width: 1.9rem;
          margin:  0.15rem 0.15rem;
          height: 0.5rem;
          line-height: 0.5rem;
          border-radius: 0.3rem;
          span{
            font-size: 0.26rem;
            color: #666;
            padding-top: 0.06rem;
          }
          img{
            width: 0.3rem;
            height: 0.28rem;
            margin-left: 0.1rem;
            display: none;
          }
        }
        .selectLabel{
          span{
            color: #ff0000;
          }
          .borderFu(#ff0000,0.6rem);
          img{
            display: block;
          }
        }
      }
    }
    .starCon{
      .star{
        display: flex;
        justify-content:center;
        span{
          width: 0.62rem;
          height: 0.58rem;
          margin: 0.2rem 0.1rem;
          background: url(../../assets/image/order/noStar.png) no-repeat;
          background-size: 0.62rem 0.58rem;
        }
        .selectStar{
          background: url(../../assets/image/order/star.png) no-repeat;
          background-size: 0.62rem 0.58rem;
        }
      }
      p{
        padding: 0.15rem 0;
        font-size: 0.3rem;
        color: #ff0000;
      }
    }
    .shopItem{
      margin-bottom: 0.2rem;
      .shop{
        display: flex;
        padding: 0.2rem 0.1rem 0.2rem 0.3rem;
        img{
            width: 1.5rem;
            height: 1.5rem;
            min-width: 1.5rem;
            display: block;
        }
        .shopMess{
          width: 80%;
          padding-left: 0.3rem;
          text-align: left;
          h2{
            font-size: 0.3rem;
            margin:0.2rem 0;
            overflow: hidden;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            width: 98%;
            display: flex;
            span{
              float: right;
              padding-right: 0.1rem;
              color: #ff0000;
            }
            label{
              width:86%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow:ellipsis;
            }
          }
          .Spec{
            padding-top: 0.2rem;
            font-size: 0.23rem;
            color: #333;
            display: flex;
            justify-content:space-between;
            p{
              width: 70%;
            }
            span{
              padding-right: 0.1rem;
            }
            .price{
              float: right;

            }
          }
        }
      }
    }
  }
  /* 图片上传区域 */
  .evalImgUpload{
    padding:.2rem 0;
    width: 90%;
    margin: auto;
    background: #fff;
    font-size: 0;
    text-align: left;
    .inputArea{
      width: 1.6rem;
      height: 1.5rem;
      position: relative;
      display: inline-block;
      margin-right: 0.12rem;
      input[type='file']{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        opacity: 0;
      }
      /* 覆盖层 */
      .theMask{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .imgArea{
      font-size: 0;
      display: inline-block;
      li{
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        margin: 0 .12rem;
        position: relative;
        img{
          width: 100%;
          height: 100%;
        }
        .closeRemove{
          width: .3rem;
          height: .3rem;
          position: absolute;
          right: -5px;
          top: -5px;
        }
      }
    }

  }
}
</style>